<template>
  <van-pull-refresh v-model="PAGING_REFRESHING" @refresh="onRefreshPaging">
    <van-list
      v-model="pagingLoading"
      style="min-height: 70vh"
      finished-text="没有更多了"
      error-text="请求失败，点击重新加载"
      :finished="!PAGING_MORE"
      :error.sync="PAGING_ERROR"
      :class="{
        [$style.pagingNoData]: PAGING_LIST.length === 0 && !PAGING_LOADING,
      }"
      @load="onLoadPaging"
    >
      <i-ding-empty v-if="PAGING_LIST.length === 0 && !PAGING_LOADING" />

      <div v-for="item in PAGING_LIST" :key="item.id">
        <div style="line-height: 60px">{{ item.id }}</div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { List, PullRefresh } from 'vant';
import DingEmpty from '@scf/ding-empty';

import Paging from '@/mixins/paging/paging';

/**
 * 模拟请求分页数据
 * @returns {Promise<{code:any; msg:string; data:{}}>}
 */
const GetMockPaging = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const list = [];
      const now = new Date().getTime();

      for (let i = 0; i < 10; i++) {
        list.push({
          id: `${now}---${i}`,
        });
      }

      resolve({
        code: 0,
        data: {
          list,
          totalPage: 5,
        },
      });
    }, 1000);
  });
};

export default {
  name: 'Paging',

  components: {
    'van-list': List,
    'van-pull-refresh': PullRefresh,
    'i-ding-empty': DingEmpty,
  },

  mixins: [Paging],

  data() {
    return {
      pagingLoading: false,
    };
  },

  methods: {
    /**
     * 请求页面数据方法
     */
    GET_PAGING(val) {
      return GetMockPaging(val);
    },

    /**
     * 下拉刷新
     */
    onRefreshPaging() {
      this.GET_PAGING_NEXT(true);
    },

    /**
     * 点击某个具体的数据
     */
    onLoadPaging() {
      this.GET_PAGING_NEXT(false).then((l) => {
        this.pagingLoading = l;
      });
    },
  },
};
</script>

<style lang="less" module>
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';

.pagingNoData {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
